<template>
  <div>
    <el-form 
      size="small"
      :model="formInline" 
    >
      <el-row>
        <el-col :span="12">
          <el-form-item 
            prop="ruleId">
            <el-input 
              clearable
              v-model="formInline.ruleId" 
              placeholder="请输入报表编号或名称进行查询"
            >
            <el-button slot="append" icon="el-icon-search">查询</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item>
            <el-button class="query-btn" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item>
            <div class="flex-end">
              <el-button class="query-btn" @click="handleAdd">新增报表方案</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        ruleId: ''
      },
    }
  },
  methods: {
    handleQuery() {
      this.$emit('query')
    },
    getParams() {
      return {
        ruleId: this.formInline.ruleId
      }
    },
    handleAdd() {
      this.$emit('handleAddConfig')
    }
  }
}
</script>

<style lang="scss" scoped> 

@import '@/assets/styles/newBase.scss';
.flex-end {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-input-group__append {
  color: #fff;
  background: #3573F4;
  // border: 1px solid #DCDFE6;
  border: none;
  padding: 0 15px;
}

  
</style>